Skip to content

fix(web): Fix file inline comment focus and persistence - #8662

Closed
ShpetimA wants to merge 5 commits into
pingdotgg:mainfrom
ShpetimA:focus-comment
Closed

ShpetimA wants to merge 5 commits into
pingdotgg:mainfrom
ShpetimA:focus-comment

Conversation

@ShpetimA

@ShpetimA ShpetimA commented Aug 29, 2026 •

Copy link
Copy Markdown
Contributor

What Changed

  • Added focus on mount logic to DiffCommentAnnotation component.
  • Fixed caret losing color on file comments
  • Make file comments persist on tab navigation same as diffs comments.

Why

  • On files when making a comment because of the pierre editor component. The DiffCommentAnnotation component wasn't autofocusing with the TextArea prop only. The autofocus was working only on diffs and not on general files.
  • Caret on the annotation component was blending with background in the files comment aswell and was not visible.
  • When commenting on a file and you switched tabs the comment would get lost when going back to that same file, it should behave the same as diffs comments should be stored in zustand state not locally only.

UI Changes

Old Caret/Focus:

Screen.Recording.2026-08-29.at.4.32.00.PM.mov

Fixed Caret/Focus:

Screen.Recording.2026-08-29.at.4.34.31.PM.mov

Old Comment file state:

Screen.Recording.2026-08-29.at.4.51.19.PM.mov

Fixed comment file state:

Screen.Recording.2026-08-29.at.5.14.13.PM.mov

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes

Note

Medium Risk
File comment state now flows through the composer draft store and Pierre remap sync, so incorrect add/remove/restore logic could lose or duplicate review comments.

Overview
Fixes inline file comments so the draft field focuses reliably in the Pierre editor, the caret stays visible, and submitted comments survive leaving and returning to a file tab—matching diff review behavior.

DiffCommentAnnotation adds optional focusOnMount (default on) and focuses the draft textarea in a layout effect via requestAnimationFrame with preventScroll, instead of relying on autoFocus alone. Draft styling now sets caret-foreground so the cursor is visible on file surfaces.

EditableFileSurface no longer keeps all annotations in local state. Persisted comments come from the composer draft store’s reviewComments (rebuilt with buildFileCommentAnnotations); only the in-progress draft stays local. Pierre remap events sync the store through resolveFileCommentAnnotationChanges, with a restorable-ID set so transient Pierre removals don’t drop comments incorrectly. Starting a comment blurs the editor and clears selections; submit/cancel flows write through the store.

New helpers and tests live in fileCommentAnnotations.ts and FilePreviewPanel.test.ts.

Reviewed by Cursor Bugbot for commit ea19cf8. Bugbot is set up for automated code reviews on this repo. Configure here.

Note

Fix file inline comment focus and sync annotations to composer draft store

  • Refactors EditableFileSurface to source line comment annotations from persisted reviewComments in the composer draft store instead of local state; opening a comment creates a local draft, submitting persists a ReviewComment, and removing an annotation removes it from the store
  • Adds buildFileCommentAnnotations, appendFileCommentEntry, and resolveFileCommentAnnotationChanges utilities in fileCommentAnnotations.ts to derive renderable annotations from store state and detect added/removed comment IDs across renders
  • Comments pruned from editor annotations are removed from the store and temporarily held in restorableCommentIdsRef for same-session restoration
  • DiffCommentAnnotation now only programmatically focuses the textarea for draft comments on the next animation frame with preventScroll, and focus can be disabled via the new focusOnMount prop
  • Risk: annotation persistence now depends on the composer draft store; any code reading the old local lineAnnotations state or expecting autoFocus on all comment kinds will need to use the new store-backed flow

Macroscope summarized ea19cf8.

@coderabbitai

coderabbitai Bot commented Aug 29, 2026 •

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8e706ec1-1c8e-42bb-a042-0a666ee5785c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:L 100-499 changed lines (additions + deletions). labels Aug 29, 2026
Comment thread apps/web/src/components/files/FilePreviewPanel.tsx
@macroscopeapp

macroscopeapp Bot commented Aug 29, 2026 •

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — The PR changes the production file-comment lifecycle from local editor state to persisted composer state and adds nontrivial remap, deletion, and restoration synchronization. Although the focus and persistence intent is clear and tests cover the pure helpers, the broader state-flow change warrants human review.

You can add or adjust custom eligibility rules. Learn more.

Comment thread apps/web/src/components/files/FilePreviewPanel.tsx
Comment thread apps/web/src/components/files/FilePreviewPanel.tsx

@macroscopeapp macroscopeapp Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One concrete regression found in the draft/persisted annotation merge in FilePreviewPanel. Details inline.

Posted via Macroscope — UI Consistency

Comment thread apps/web/src/components/files/FilePreviewPanel.tsx Outdated

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 0e2dcb0. Configure here.

Comment thread apps/web/src/components/files/FilePreviewPanel.tsx Outdated
@ShpetimA ShpetimA closed this Sep 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L 100-499 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant